<template>
  <view class="uni-container">
    <uni-steps :options="stepOptions" :active="active" :active-color="activeColor" :inactive-color="inactiveColor" style="margin: 20px 0" />
    <uni-forms ref="form" :model="formData" validateTrigger="bind"  label-width="100px">
      <uni-forms-item name="customer_id" label="客户" required>
        <uni-data-select
        	 collection="mydb-customer"
        	 field="_id as value, name as text"
        	 v-model="formData.customer_id"
         />
      </uni-forms-item>
      <uni-forms-item name="customerName" label="客户名称" required v-show="step == 1">
      <uni-easyinput placeholder="客户名称" v-model="formData.customerName"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="phone" label="手机号" required v-show="step == 1">
        <uni-easyinput placeholder="手机号" v-model="formData.phone"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="mainContactPhone" label="联系人电话"  v-show="step == 1">
        <uni-easyinput placeholder="主要联系人电话号码" v-model="formData.mainContactPhone"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="loanPeriod" label="贷款期限(月)" v-show="step == 1">
        <uni-easyinput placeholder="贷款期限" v-model="formData.loanPeriod"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="customerSource" label="客户来源" v-show="step == 1">
        <uni-data-checkbox v-model="formData.customerSource" :localdata="formOptions.customerSource_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="idCard" label="身份证号" v-show="step == 1">
        <uni-easyinput placeholder="身份证号" v-model="formData.idCard"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="maritalStatus" label="婚姻状态" v-show="step == 1">
        <uni-data-checkbox v-model="formData.maritalStatus" :localdata="formOptions.maritalStatus_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="remark" label="备注" v-show="step == 1">
        <uni-easyinput placeholder="备注" v-model="formData.remark"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="intendedProduct" label="意向产品" v-show="step == 2">
        <uni-easyinput placeholder="意向产品" v-model="formData.intendedProduct"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="requiredAmount" label="需求金额(万)" v-show="step == 2">
        <uni-easyinput placeholder="需求金额(万)" v-model="formData.requiredAmount"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="city" label="所在城市" v-show="step == 2">
        <uni-easyinput placeholder="城市" v-model="formData.city"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="currentCompanyTenure" label="当前单位工龄(月)" v-show="step == 2">
        <uni-easyinput placeholder="当前单位工龄(月)" v-model="formData.currentCompanyTenure"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="salaryPaymentMethod" label="工资发放形式" v-show="step == 2">
        <uni-data-checkbox v-model="formData.salaryPaymentMethod" :localdata="formOptions.salaryPaymentMethod_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="monthlyIncome" label="月收入(元)" v-show="step == 2">
        <uni-easyinput placeholder="月收入(元)" v-model="formData.monthlyIncome"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="occupation" label="职业身份" v-show="step == 2">
        <uni-data-checkbox v-model="formData.occupation" :localdata="formOptions.occupation_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="loanPurpose" label="贷款用途" v-show="step == 2">
        <uni-data-checkbox v-model="formData.loanPurpose" :localdata="formOptions.loanPurpose_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="socialSecurity" label="社保" v-show="step == 3">
        <uni-data-checkbox v-model="formData.socialSecurity" :localdata="formOptions.socialSecurity_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="housingFund" label="公积金" v-show="step == 3">
        <uni-data-checkbox v-model="formData.housingFund" :localdata="formOptions.housingFund_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="carStatus" label="车产情况" v-show="step == 3">
        <uni-data-checkbox v-model="formData.carStatus" :localdata="formOptions.carStatus_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="houseStatus" label="房产情况" v-show="step == 3">
        <uni-data-checkbox v-model="formData.houseStatus" :localdata="formOptions.houseStatus_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="zhimaScore" label="芝麻分" v-show="step == 3">
        <uni-data-checkbox v-model="formData.zhimaScore" :localdata="formOptions.zhimaScore_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="creditCardStatus" label="信用卡情况" v-show="step == 3">
        <uni-data-checkbox v-model="formData.creditCardStatus" :localdata="formOptions.creditCardStatus_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="insurancePolicy" label="保险保单" v-show="step == 3">
        <uni-data-checkbox v-model="formData.insurancePolicy" :localdata="formOptions.insurancePolicy_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="debtStatus" label="负债情况" v-show="step == 3">
        <uni-data-checkbox v-model="formData.debtStatus" :localdata="formOptions.debtStatus_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="spouseName" label="配偶姓名" v-show="step == 4">
        <uni-easyinput placeholder="配偶姓名" v-model="formData.spouseName"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="spouseAge" label="配偶年龄" v-show="step == 4">
        <uni-easyinput placeholder="配偶年龄" v-model="formData.spouseAge"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="spouseOccupation" label="配偶职业" v-show="step == 4">
        <uni-data-checkbox v-model="formData.spouseOccupation" :localdata="formOptions.spouseOccupation_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="isSpouseInformed" label="配偶是否知情" v-show="step == 4">
        <uni-easyinput placeholder="配偶是否知情" v-model="formData.isSpouseInformed"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="isSpouseResponsible" label="配偶是否负责" v-show="step == 4">
        <uni-easyinput placeholder="配偶是否负责" v-model="formData.isSpouseResponsible"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="creditReport" label="征信上传" v-show="step == 5">
		<uni-file-picker return-type="array" v-model="formData.creditReport"></uni-file-picker>
      </uni-forms-item>
      <uni-forms-item name="housePropertyDocs" label="房产资料上传" v-show="step == 5">
        <uni-file-picker return-type="array" v-model="formData.housePropertyDocs"></uni-file-picker>
      </uni-forms-item>
      <uni-forms-item name="idCardDocs" label="身份证上传" v-show="step == 5">
       <uni-file-picker return-type="array" v-model="formData.idCardDocs"></uni-file-picker>
      </uni-forms-item>
      <uni-forms-item name="otherDocs" label="其它上传" v-show="step == 5">
        <uni-file-picker return-type="array" v-model="formData.otherDocs"></uni-file-picker>
      </uni-forms-item>
      <uni-forms-item name="belongDept" label="归属部门" v-show="step == 5">
        <uni-easyinput placeholder="归属部门" v-model="formData.belongDept"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="belongTo" label="归属人" v-show="step == 5">
		  <uni-data-select
		  			 collection="uni-id-users"
		  			 field="_id as value, nickname as text"
		  			 v-model="formData.belongTo"
		   />
      </uni-forms-item>
      <uni-forms-item name="lastFollowTime" label="最近跟进时间" v-show="step == 6">
        <uni-datetime-picker return-type="timestamp" v-model="formData.lastFollowTime"></uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="lastFollowBy" label="最近跟进人" v-show="step == 6">
        <uni-data-select
        			 collection="uni-id-users"
        			 field="_id as value, nickname as text"
        			 v-model="formData.lastFollowBy"
         />
      </uni-forms-item>
      <uni-forms-item name="totalFollowCount" label="所有跟进次数" v-show="step == 6">
        <uni-easyinput placeholder="所有跟进次数" v-model="formData.totalFollowCount"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="todayFollowCount" label="当日跟进次数" v-show="step == 6">
        <uni-easyinput placeholder="当日跟进次数" v-model="formData.todayFollowCount"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="handlingStatus" label="受理情况" v-show="step == 6">
        <uni-easyinput placeholder="受理情况" v-model="formData.handlingStatus"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="lastUpdateBy" label="最近修改人" v-show="step == 6">
        <uni-data-select
        			 collection="uni-id-users"
        			 field="_id as value, nickname as text"
        			 v-model="formData.lastUpdateBy"
         />
      </uni-forms-item>
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;" @click="submit">保存</button>
        <button type="warning" class="uni-button" style="width: 100px;margin-left: 15px;" @click="nextStep">下一步</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
  import { validator } from '../../js_sdk/validator/mydb-customer-fields.js';
  import options from './options.js';
  const db = uniCloud.database();
  const dbCmd = db.command;
  const dbCollectionName = 'mydb-customer-fields';

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.includes(key)) {
        result[key] = validator[key]
      }
    }
    return result
  }

  

  export default {
    data() {
      let formData = {
        "customerName": "",
        "phone": "",
        "mainContactPhone": "",
        "loanPeriod": "",
        "customerSource": "",
        "idCard": "",
        "maritalStatus": "",
        "remark": "",
        "intendedProduct": "",
        "requiredAmount": "",
        "city": "",
        "currentCompanyTenure": "",
        "salaryPaymentMethod": "",
        "monthlyIncome": "",
        "occupation": "",
        "loanPurpose": "",
        "socialSecurity": "",
        "housingFund": "",
        "carStatus": "",
        "houseStatus": "",
        "zhimaScore": "",
        "creditCardStatus": "",
        "insurancePolicy": "",
        "debtStatus": "",
        "spouseName": "",
        "spouseAge": "",
        "spouseOccupation": "",
        "isSpouseInformed": null,
        "isSpouseResponsible": null,
        "creditReport": [],
        "housePropertyDocs": [],
        "idCardDocs": [],
        "otherDocs": [],
        "createBy": "",
        "createTime": null,
        "belongDept": "",
        "belongTo": "",
        "lastFollowTime": null,
        "lastFollowBy": "",
        "totalFollowCount": 0,
        "todayFollowCount": 0,
        "handlingStatus": "",
        "lastUpdateBy": ""
      }
      return {
        formData,
        formOptions: {
         ...options
        },
        rules: {
          ...getValidator(Object.keys(formData))
        },
         step: 1,
        stepOptions: [
          {
            title: '客户基本信息'
          },
          {
            title: '客户联系人信息'
          },
          {
            title: '客户资产信息'
          },
          {
            title: '客户配偶信息'
          },
          {
            title: '客户其他信息'
          },
          {
            title: '客户跟进信息'
          },
          {
            title: '客户受理信息'
          }
        ],
        active: 0,
        activeColor: '#007AFF',
        inactiveColor: '#999'
      }
    },
    onLoad(e) {
      if (e.id) {
        const id = e.id
        this.formDataId = id
        this.getDetail(id)
      }
      if (e.customer_id) {
        this.formData.customer_id = e.customer_id
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
        /**
       * 下一步
       */
      nextStep() {
        this.step++
        this.active++
      },
      /**
       * 验证表单并提交
       */
      submit() {
        uni.showLoading({
          mask: true
        })
        this.$refs.form.validate().then((res) => {
          return this.submitForm(res)
        }).catch(() => {
        }).finally(() => {
          uni.hideLoading()
        })
      },

      /**
       * 提交表单
       */
      submitForm(value) {
        // 使用 clientDB 提交数据
        return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
          uni.showToast({
            title: '保存成功'
          })
          this.getOpenerEventChannel().emit('refreshData')
          setTimeout(() => uni.navigateBack(), 500)
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        })
      },

      /**
       * 获取表单数据
       * @param {Object} id
       */
      getDetail(id) {
        uni.showLoading({
          mask: true
        })
        db.collection(dbCollectionName).doc(id).get().then((res) => {
          const data = res.result.data[0]
          if (data) {
            this.formData = data
            
          }
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        }).finally(() => {
          uni.hideLoading()
        })
      }
    }
  }
</script>
